<template>
  <div class="floor">
    <div class="floor-title">
      <h3>家用电器</h3>
      <div class="fr">
        <ul class="nav-tabs clearfix">
          <li class="active">
            <a href="#tab1" data-toggle="tab">热门</a>
          </li>
          <li>
            <a href="#tab2" data-toggle="tab">大家电</a>
          </li>
          <li>
            <a href="#tab3" data-toggle="tab">生活电器</a>
          </li>
          <li>
            <a href="#tab4" data-toggle="tab">厨房电器</a>
          </li>
          <li>
            <a href="#tab5" data-toggle="tab">应季电器</a>
          </li>
          <li>
            <a href="#tab6" data-toggle="tab">空气/净水</a>
          </li>
          <li>
            <a href="#tab7" data-toggle="tab">高端电器</a>
          </li>
        </ul>
      </div>
    </div>
    <div class="floor-content">
      <div class="blockgary">
          <ul class="blockgary-list">
            <li>节能补贴</li>
            <li>4k电视</li>
            <li>空气净化器</li>
            <li>滚筒洗衣机</li>
            <li>IH电饭煲</li>
            <li>电热水器</li>
          </ul>
        <img src="../../../assets/images/home/floor-1-1.png"/>
      </div>
      <div class="floorBanner">
        <img src="../../../assets/images/home/floor-1-b03.png"/>
      </div>
      <div class="splitimg">
        <div class="splitimg-bottom">
          <img src="../../../assets/images/home/floor-1-2.png"/>
        </div>
        <img src="../../../assets/images/home/floor-1-3.png"/>
      </div>
      <div class="splitimg">
        <img src="../../../assets/images/home/floor-1-4.png"/>
      </div>
      <div>
        <div class="splitimg-bottom">
          <img src="../../../assets/images/home/floor-1-5.png"/>
        </div>
        <img src="../../../assets/images/home/floor-1-6.png"/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "appliances"
}
</script>

<style lang="less">
.floor{
  width: 1200px;
  margin: 0 auto;
  .floor-title{
    height: 48px;
    border-bottom: 3px solid #c81623;
    h3{
      float: left;
      color: #c81623;
      font-size: 20px;
      line-height: 30px;
      margin: 9px 0;
      font-weight: 700;
    }
    .fr {
      float: right;

      .nav-tabs {
        margin: 10px 0 0;
        display: inline-block;

        li {
          float: left;
          line-height: 18px;

          a {
            padding-top: 1px;
            font-weight: 400;
            background-color: #fff;

            &::after {
              content: "|";
              padding: 0 10px;
            }
          }

          &:nth-child(7) {
            a {
              &::after {
                content: "";
              }
            }
          }

          &.active {
            a {
              color: #e1251b;
            }
          }
        }
      }
    }
  }
  .floor-content{
    display: flex;
    height: 360px;
    .blockgary{
      //width: 210px;
      height: 100%;
      background: #f7f7f7;
      .blockgary-list{
        padding: 15px 0;
        overflow: hidden;
        li{
          list-style-type: none;
          float: left;
          width: 40%;
          margin: 0 10px;
          border-bottom: 1px solid #e4e4e4;
          text-align: center;
          line-height: 26px;
        }
      }
    }
    .splitimg-bottom{
      border-bottom: 1px solid #e4e4e4;
    }
    .splitimg{
      width: 220px;
      height: 100%;
      border-right: 1px solid #e4e4e4;
    }
  }
}
</style>